<template>
  <div class="rechargeRecord">
    <ComNavBar />

    <div class="container">
      <div class="title title_color">{{t('Deposit Records')}}</div>
      <van-list
        :loading="loading"
        :finished="finished"
        offset="50"
        :loading-text="t('loading......')"
        @load="onLoad"
      >
        <div class="card" v-for="item in recordList" :key="item.id"  @click="handleFunc(item.id)">
          <div class="card-item">
            <div class="card-item-content">
              <div class="card-item-name">{{t('Status')}}: <span >{{ item.status }}</span>
              </div>
              <div class="card-item-date">{{t('Time')}}: {{ date(item.create_datetime) }}</div>
            </div>
            <div class="card-item-value">₹{{ decimalpre(item.amount) }}</div>
          </div>
        </div>
      </van-list>

      <NoRecord
        :showTxt="!!(recordList.length && finished)"
        :showImg="!recordList.length && !loading"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { decimalpre, date } from '@/utils/util'
import { get } from '@/utils/request'
import { t } from '@/languages'
const $router = useRouter()

const recordList = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)

async function queryList(isMore = false) {
  if (!isMore) {
    page.value = 1
    finished.value = false
    recordList.value = []
  }

  loading.value = true

  try {
    const res = await get(`/api/app/deposits/`, {
      page: page.value,
      limit: 10
    })

    console.log(res)

    recordList.value = [...recordList.value, ...res.records]

    if (recordList.value.length >= res.count) {
      finished.value = true
    }

  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

function onLoad() {
  if (loading.value || finished.value) return

  page.value++

  queryList(true)
}

function handleFunc(id) {
  $router.push({
    path: '/mine/rechargeRecordDatail',
    query: { id }
  })
}

onBeforeMount(queryList)

</script>
<style lang="scss" scoped>
.container {
  padding: .26667rem;
}

.rechargeRecord .container .title {
  margin-top: .53333rem;
  margin-left: .53333rem;
  margin-bottom: .53333rem;
  font-size: .64rem;
  font-weight: 600;
}

.rechargeRecord .container .card {
  background: #0e1822;
  border: .02667rem solid #0f3a40;
  border-radius: .10667rem;
  margin-bottom: .26667rem;
}

.rechargeRecord .container .card .card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem 0.213333rem;
}

.rechargeRecord .container .card .card-item .card-item-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-weight: 600;
  // flex: 4;
  flex-shrink: 0;
}

.rechargeRecord .container .card .card-item .card-item-content .card-item-name {
  text-align: left;
}

.rechargeRecord .container .card .card-item .card-item-date {
  width: 100%;
  font-size: .32rem;
  margin-top: .13333rem;
  color: #9597a3;
}

.rechargeRecord .container .card .card-item .card-item-content .card-item-name span {
  color: #5ef3c8;
}

.rechargeRecord .container .card .card-item .card-item-value {
  color: #5eec8c;
  flex: 1;
  font-size: .48rem;
  flex-shrink: 0;
  text-align: center;
}
</style>
